<template>
  <div class="flow-menu" ref="tool">
    <div v-for="(menu, index) in menuList" :key="index">
      <span v-if="menu.name" class="ef-node-pmenu" @click="menu.open = !menu.open"
        >{{ menu.name
        }}<i
          :class="{
            V7_iconV7tubiao_shang: menu.open,
            V7_iconV7tubiao_xiaa: !menu.open,
            V7_iconfont: true
          }"
        ></i>
      </span>
      <ul v-show="menu.open" class="ef-node-menu-ul">
        <draggable
          :prevent-on-filter="false"
          :sort="false"
          :disabled="false"
          ghost-class="tt"
          :delay="0"
          :animation="0"
          force-fallback
          @end="end"
          @start="move"
          v-model="menu.children"
        >
          <!-- <li v-for="(subMenu, index) in menu.children" class="ef-node-menu-li" :key="index" :type="subMenu.type">
            <icon-svg :icon-class="subMenu.ico" />{{ subMenu.name }}
          </li> -->
          <template #item="{ element, index }">
            <li class="ef-node-menu-li" :key="index" :type="element.type">
              <icon-svg :ico-color="element.icoColor" :icon-class="element.ico" />{{ element.name }}
            </li>
          </template>
        </draggable>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { onMounted, reactive, toRefs } from 'vue'
import draggable from 'vuedraggable'
import { iconMap } from './constants'
interface MenuChild {
  type?:
    | 'ivr-node-date'
    | 'ivr-node-transfer'
    | 'ivr-node-play'
    | 'ivr-node-menu'
    | 'ivr-node-voicemail'
    | 'ivr-node-callurl'
    | 'ivr-node-collect'
    | 'ivr-node-dynamic-route'
  name?: string
  ico?: string
  icoColor?: string
}
interface MenuListObj {
  type: 'group'
  name: string
  ico: string
  // 是否展开
  open: boolean
  children: MenuChild[]
}
export default defineComponent({
  components: { draggable },
  emits: ['addNode'],
  setup(props, { emit }) {
    const mousePosition = {
      left: -1,
      top: -1
    }

    const draggableOptions = {
      preventOnFilter: false,
      sort: false,
      disabled: false,
      ghostClass: 'tt',
      // 不使用H5原生的配置
      forceFallback: true
      // 拖拽的时候样式
      // fallbackClass: 'flow-node-draggable'
    }

    interface State {
      menuList: MenuListObj[]
      nodeMenu: MenuChild | undefined
    }

    const state: State = reactive({
      menuList: [
        {
          type: 'group',
          name: '',
          ico: 'el-icon-video-play',
          open: true,
          children: [
            {
              type: 'ivr-node-play',
              name: '播放语音',
              ...iconMap.get('ivr-node-play')
            },
            {
              type: 'ivr-node-date',
              name: '时间条件',
              ...iconMap.get('ivr-node-date')
            },
            {
              type: 'ivr-node-menu',
              name: '按键菜单',
              ...iconMap.get('ivr-node-menu')
            },
            {
              type: 'ivr-node-transfer',
              name: '转人工',
              ...iconMap.get('ivr-node-transfer')
            },
            {
              type: 'ivr-node-voicemail',
              name: '留言',
              ...iconMap.get('ivr-node-voicemail')
            },
            {
              type: 'ivr-node-callurl',
              name: '数据交互',
              ...iconMap.get('ivr-node-callurl')
            },
            {
              type: 'ivr-node-collect',
              name: '采集收号',
              ...iconMap.get('ivr-node-collect')
            },
            {
              type: 'ivr-node-dynamic-route',
              name: '分支路由',
              ...iconMap.get('ivr-node-dynamic-route')
            }
          ]
        }
      ],
      nodeMenu: {}
    })

    // 是否是火狐浏览器
    const isFirefox = () => {
      const userAgent = navigator.userAgent
      if (userAgent.indexOf('Firefox') > -1) {
        return true
      }
      return false
    }

    onMounted(() => {
      if (isFirefox()) {
        document.body.ondrop = (event: any) => {
          // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
          mousePosition.left = event.layerX
          mousePosition.top = event.clientY - 50
          event.preventDefault()
          event.stopPropagation()
        }
      }
    })

    const getMenuByType = (type: any): MenuChild | undefined => {
      for (let i = 0; i < state.menuList.length; i++) {
        const children = state.menuList[i].children
        for (let j = 0; j < children.length; j++) {
          if (children[j].type === type) {
            return children[j]
          }
        }
      }
    }

    // 拖拽开始时触发
    const move = (evt: any) => {
      const type = evt.item.attributes.type.nodeValue
      state.nodeMenu = getMenuByType(type)
    }

    // 拖拽结束时触发
    const end = (evt: any) => {
      emit('addNode', evt, state.nodeMenu, mousePosition)
    }
    return {
      draggableOptions,
      end,
      move,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.flow-menu
  position absolute
  z-index 100
  background white
  left 20px
  top 164px
  padding 10px
  border-radius 4px
/* 节点菜单 */
.ef-node-pmenu
  cursor pointer
  height 32px
  line-height 32px
  display block
  font-weight bold
  color #4A4A4A
  display flex
  justify-content space-between
  width 100px
  .V7_iconfont
    font-size 12px
    color #e0e3e7
.ef-node-pmenu:hover
  // background-color #E0E0E0
.ef-node-menu-li
  color #565758
  margin: 5px 0 15px 0
  padding 5px
  border-radius 5px
  padding-left 8px
  display flex
  align-items center
  .svg-icon
    margin-right 8px
.ef-node-menu-li:nth-of-type(1)
  margin-top: 0;
.ef-node-menu-li:nth-of-type(8)
  margin-bottom: 0;
.ef-node-menu-li:hover
  /* 设置移动样式 */
  cursor move
  background-color #F0F7FF
  // border 1px dashed #1879FF
  // border-left 4px solid #1879FF
  // padding-left 5px
.ef-node-menu-ul
  list-style none
  padding-left inherit
  margin: 5px 0 5px 0;
</style>
<!-- <style lang="stylus">
.flow-menu
  .svg-icon
    font-size 17px
</style> -->
